import tool from '@/utils/tool';

const collapse = {
  mounted(el) {
    const target = el;
    target.style.position = "relative";

    let cssText = '';
    const hide = createHideDiv();
    const show = createShowDiv();

    hide.onclick = () => {
      cssText = target.style.cssText;
      target.style.cssText = 'position: relative; ' +
        'width: 10px; ' +
        'display: grid; ' +
        'overflow: hidden; ' +
        'border: none; ' +
        'padding: 0 0 0 10px!important; ' +
        'margin: 0 0 0 -10px!important;';
      hide.style.display = 'none';
      show.style.display = 'flex';
    };

    show.onclick = () => {
      target.style.cssText = cssText;
      hide.style.display = 'flex';
      show.style.display = 'none';
    };

    target.appendChild(hide);
    target.appendChild(show);
  }
}

const createShowDiv = () => {
  const box = document.createElement('DIV');
  box.id = tool.uuid();
  box.style.position = 'absolute';
  box.style.display = 'none';
  box.style.flexDirection = 'row';
  box.style.justifyContent = 'start';
  box.style.alignItems = 'center';
  box.style.height = '100%';
  box.style.width = '0';
  box.style.top = '0';
  box.style.left = '0';
  box.style.userSelect = 'none';
  box.style.touchAction = 'none';

  const shape = document.createElement('DIV');
  shape.style.display = 'flex';
  shape.style.height = '50px';
  shape.style.width = '0';
  shape.style.zIndex = '10';
  shape.style.cursor = 'pointer';
  shape.style.borderLeft = '10px solid rgb(0, 133, 246)';
  shape.style.borderTop = '10px solid transparent';
  shape.style.borderBottom = '10px solid transparent';
  shape.style.userSelect = 'none';
  shape.style.touchAction = 'none';
  shape.title = '展开';

  const icon = document.createElement('I');
  icon.className = 'caret-right';
  icon.style.position = 'relative';
  icon.style.width = '0';
  icon.style.minWidth = 'unset';
  icon.style.color = 'white';
  icon.style.top = '18px';
  icon.style.right = '7px';
  icon.style.display = 'block';
  icon.style.userSelect = 'none';
  icon.style.touchAction = 'none';

  shape.appendChild(icon);
  box.appendChild(shape);

  return box;
}

const createHideDiv = () => {
  const box = document.createElement('DIV');
  box.id = tool.uuid();
  box.style.position = 'absolute';
  box.style.display = 'flex';
  box.style.flexDirection = 'row';
  box.style.justifyContent = 'end';
  box.style.alignItems = 'center';
  box.style.height = '100%';
  box.style.width = '0';
  box.style.top = '0';
  box.style.right = '0';
  box.style.userSelect = 'none';
  box.style.touchAction = 'none';

  const shape = document.createElement('DIV');
  shape.style.display = 'block';
  shape.style.height = '50px';
  shape.style.width = '0';
  shape.style.zIndex = '10';
  shape.style.cursor = 'pointer';
  shape.style.borderRight = '10px solid rgb(0, 133, 246)';
  shape.style.borderTop = '10px solid transparent';
  shape.style.borderBottom = '10px solid transparent';
  shape.style.userSelect = 'none';
  shape.style.touchAction = 'none';
  shape.title = '收缩';

  const icon = document.createElement('I');
  icon.className = 'caret-left';
  icon.style.position = 'relative';
  icon.style.width = '0';
  icon.style.minWidth = 'unset';
  icon.style.color = 'white';
  icon.style.top = '18px';
  icon.style.left = '-3px';
  icon.style.display = 'block';
  icon.style.userSelect = 'none';
  icon.style.touchAction = 'none';

  shape.appendChild(icon);
  box.appendChild(shape);

  return box;
}

export default collapse;